<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    div {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    img {
        width: 300px;
        height: 200px;
        object-fit: cover;
        /* position: absolute; */
    }
</style>

<body>
    <div>
        <div>左</div>
        <img src="./img/1.jpg">
        <img src="./img/2.jpg">
        <img src="./img/3.jpg">
        <img src="./img/4.jpg">
        <img src="./img/5.jpg">
        <div>右</div>
    </div>
</body>
<script>
    let index = 0
    function layout() {
        const imgs = document.querySelectorAll('img')
        for (let i = 0; i < imgs.length; i++) {
            // imgs[i].style.zIndex = index + 1
            const offsetX = i * 10;
            imgs[i].style.transform = `translateX(${offsetX}px)`;
        }
    }


    layout()

</script>

</html>